<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getDataList" @newAdd="isVisible = true">
      <el-table-column type="expand">
        <template slot-scope="{ row }">
          <div class="dialogExpandTable">
            <el-table :data="row.detailList || []" :header-cell-style="{ background: '#3f61f110' }">
              <el-table-column prop="cartonSizeName" label="纸箱规格" min-width="90" />
              <el-table-column prop="packageDescription" label="包装描述" min-width="90" />
              <el-table-column prop="eachBoxQuantityStr" label="每箱数量" min-width="90" />
              <el-table-column prop="stockBoxCount" label="箱数" min-width="90" />
              <el-table-column prop="stockQuantity" label="数量" min-width="100" />
              <el-table-column label="库位" prop="productStockKwData" min-width="150" />
              <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope" style="text-align: center">
                  <div style="display: flex; justify-content: center">
                    <span class="see" style="color:#3F61F1;cursor: pointer;" v-permission="'MenuCode5-1-2-1'"
                      @click="handleEdit(scope.row,row)">修改库位</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
    </na-table>
    <!-- 成品明细 -->
    <el-dialog v-dialogDrag title="成品明细" :visible.sync="isVisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%">
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <div>
            <el-radio-group v-model="infoSearch.StockChangeType" size="mini" @change="handleStockChange">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="2">出库</el-radio-button>
              <el-radio-button label="1">入库</el-radio-button>
            </el-radio-group>
          </div>
          <!--      搜索框-->
          <div class="search">
            <el-input v-model="infoSearch.likeWords" placeholder="输入关键字" size="small">
              <el-button slot="append" :loading="infoLoading" type="primary" icon="el-icon-search"
                :disabled="infoLoading" element-loading-spinner="el-icon-loading" @click="getInfoList">
                搜索
              </el-button>
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder">
          <el-table v-loading="infoLoading" :data="finishedInfoList" max-height="460" border style="width: 100%">
            <el-table-column prop="associationBillNo" label="关联单号" min-width="110" />
            <el-table-column prop="changeActionName" label="类型" min-width="100">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" show-overflow-tooltip min-width="110" />
            <el-table-column prop="printingSurface" label="版面" min-width="100" />
            <el-table-column prop="productVersion" label="版本" min-width="90" />
            <el-table-column prop="customerName" label="所属客户" show-overflow-tooltip min-width="120" />
            <el-table-column prop="xieYiShuHao" label="订单单号" show-overflow-tooltip min-width="120" />
            <el-table-column prop="cartonSizeName" label="纸箱规格" min-width="90" />
            <el-table-column prop="packageDescription" label="包装描述" show-overflow-tooltip min-width="120" />
            <el-table-column prop="eachBoxQuantityStr" label="包装数量" show-overflow-tooltip min-width="120" />
            <el-table-column prop="changeBoxCount" label="变化箱数" show-overflow-tooltip min-width="120">
              <template slot-scope="{ row }">
                <template v-if="row.changeBoxCount > 0"><span style="color: #67c23a">{{
                    row.changeBoxCount
                  }}</span></template>
                <template v-if="row.changeBoxCount === 0"><span>{{ row.changeBoxCount }}</span></template>
                <template v-else-if="row.changeBoxCount < 0"><span style="color: #e13335">{{
                    row.stockTypeName
                  }}</span></template>
              </template>
            </el-table-column>
            <el-table-column prop="stockSumBoxCount" label="库存箱数" show-overflow-tooltip min-width="120" />
            <el-table-column prop="changeQuantity" label="变化数量" min-width="90" />
            <el-table-column prop="stockSumQuantity" label="库存数量" show-overflow-tooltip min-width="120" />
            <el-table-column prop="productUnit" label="单位" show-overflow-tooltip min-width="120" />
            <el-table-column prop="stockChangeAreaShelfName" label="库位" min-width="90" />
            <el-table-column prop="stockChangeRemark" label="备注" min-width="150" show-overflow-tooltip>
              <template scope="{row}">
                {{ row.stockChangeRemark || "--" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--    分页-->
        <div class="paginaCon">
          <pagination :total="finishedTotal" :page.sync="infoSearch.pageIndex" :limit.sync="infoSearch.pageSize"
            @pagination="getInfoList" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="isVisible = false">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="修改库位" :visible.sync="isShowLocation" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%">
      <div class="dialogDody">
        <div style="margin-top: 15px; padding: 0 15px">
          <tree-transfer :title="['仓库库位', '物料所在库位']" :from_data="fromData" :to_data="toData"
            :defaultProps="{ label: 'treeObjectName', children: 'chidren' }" node_key="treeObjectCode" pid="parentCode"
            @add-btn="add" @remove-btn="remove" :mode="mode" height="540px" filter openAll>
          </tree-transfer>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowLocation = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import treeTransfer from "el-tree-transfer";
  import {
    arraySort
  } from "@/utils";
  import naTable from "@/components/naTable";
  import MixA from "@/utils/mixin";
  const mixa = new MixA();
  export default {
    name: "FinishedQuery",
    components: {
      naTable,
      treeTransfer
    },
    mixins: [mixa],
    data() {
      return {
        infoLoading: false,
        isVisible: false, // 库存明细弹框显示隐藏
        searchLoading: false,
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          likeWords: "",
          productType: 1,
          customerCode: "",
        }, // 成品库存搜索条件
        mode: "transfer", // transfer addressList
        isShowLocation: false,
        codeArr: [],
        fromData: [],
        toData: [],

        editParameter: {
          productNo: "",
          productStockNo: "",
          areaShelfCodeList: [],
        },

        total: 0,
        expands: [],
        dataList: [],
        tableHeight: null,
        tableHead: [], // 表头
        finishedInfoList: [], // 库存明细列表
        finishedTotal: 0,
        infoSearch: {
          pageIndex: 1,
          pageSize: 30,
          likeWords: "",
          StockChangeType: 0,
          ProductType: 1
        },

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'productID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          addTitle: '库存明细', //新建按钮名称-为''则不显示，为undefine则为新建
          addPermission: '', //新建按钮权限
          addIcon: 'queryIcon', //新建按钮icon
          voidWord: '', //需要查询作废的字段
          statusList: [], //状态筛选条件列表
          statusWord: '', //状态筛选的字段
          refresh: true, //刷新按钮
          //表格按钮
          operationBtn: [],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        },
      };
    },
    created() {
      // 成品查询 动态表头
      this.getTableHead();
      // 库存明细列表
      this.getInfoList();
    },
    mounted() {},
    methods: {
      // 库存明细列表
      getInfoList() {
        this.infoLoading = true;
        this.$api.warehouse
          .GetMatchPageProductStockChangeLogDataList(this.infoSearch)
          .then((res) => {
            this.finishedInfoList = res.list;
            this.finishedTotal = res.totalCount;
            this.infoLoading = false;
          })
          .catch(() => {
            this.infoLoading = false;
          });
      },

      //获取库位列表
      getLocationList() {
        this.$api.warehouse.GetAllAreaShelfDataList().then((res) => {
          res.forEach((item) => {
            item.parentCode = "";
          });
          this.fromData = res;
          console.log(this.fromData);
        });
      },

      handleStockChange() {
        this.infoSearch.pageIndex = 1
        this.getInfoList()
      },

      //编辑
      handleEdit(row, masterRow) {
        console.log(row)
        this.toData = [];
        this.getLocationList();
        this.editParameter.productNo = masterRow.productNo;
        this.editParameter.productStockNo = row.productStockNo;
        if (row.productStockKwDmList.length > 0) {
          this.toData = this.formDataTree(row.productStockKwDmList);
        }
        this.isShowLocation = true;
      },

      // 监听穿梭框组件添加
      add(fromData, toData, obj) {
        console.log(fromData);
        console.log(obj);
      },
      // 监听穿梭框组件移除
      remove(fromData, toData, obj) {
        console.log(obj);
      },

      //保存修改库位
      handleSubmit() {
        this.formDataCode(this.toData);
        this.$api.warehouse
          .BatchUpdateStockProductKw(this.editParameter)
          .then(() => {
            this.$message.success("修改成功！");
            this.isShowLocation = false;
            this.getDataList();
          });
      },

      formDataCode(res) {
        res.forEach((item) => {
          if (item.chidren.length > 0) {
            this.formDataCode(item.chidren);
          } else {
            this.codeArr.push(item.treeObjectCode);
          }
        });
        this.editParameter.areaShelfCodeList = this.codeArr;
      },

      //格式化数据
      formDataTree(res) {
        let treeData = res;
        treeData.forEach((item) => {
          if (item.chidren.length > 0) {
            this.formDataTree(item.chidren);
          } else {
            item.treeObjectName = "原料区" + item.treeObjectName;
          }
        });
        return treeData;
      },
      expandChange(row, expanded) {
        this.expands = [];
        if (expanded.length > 0) {
          this.expands.push(row.productID);
        }
      },
      // 成品查询 动态表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.selectStockProductList,
        };
        this.$api.common.getAllTableHead(parmas).then((res) => {
          res.sort(arraySort("columnSort"));
          this.tableData.thead = res;
          // 半成品出库列表
          this.getDataList();
        });
      },
      // 成品列表
      getDataList() {
        const params = this.search;
        this.searchLoading = true;
        this.$api.warehouse
          .GetMatchPageStockProductInfoOV(params)
          .then((res) => {
            this.tableData.tbody = res.list;
            this.search.total = res.totalCount;
            this.searchLoading = false;
          })
          .catch(() => {
            this.searchLoading = false;
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
</style>
